<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>cesium</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="../../../layui/css/layui.css">
    <style>
        .layui-form-item {
            width: 80%;
        }

        .do {
            margin-left: 110px;
        }

        .content {
            margin-top: 20px;
        }

        .layui-form-select dl dd.layui-this {
            background-color: #00aeff !important;
        }

        .fwlx .layui-form-select {
            display: none;
        }

        .layui-anim-upbit {
            max-height: 170px;
        }

        .mxlx,
        .xsjb {
            display: none;
        }

        .layui-slider {
            top: 18px;
        }
    </style>
</head>

<body>
    <div class="content layui-form" lay-filter="content">
        <div class="layui-form-item">
            <label class="layui-form-label">数据类型</label>
            <div class="layui-input-block">
                <select name="datatype" lay-verify="required" lay-filter="sjlx">
                    <option value="0">矢量</option>
                    <option value="1">模型</option>
                    <option value="2">街景</option>
                    <option value="3">地形</option>
                    <option value="4">影像</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">服务类型</label>
            <div class="layui-input-block fwlx">
                <select name="servertype" lay-verify="required" lay-filter="fwlx">

                    <option value="vector">矢量切片</option>
                    <option value="geojson">WFS</option>
                </select>
                <select name="servertype" lay-verify="required" lay-filter="fwlx">

                    <option value="terrain">model</option>
                </select>
                <select name="servertype" lay-verify="required" lay-filter="fwlx">

                    <option value="vector">矢量切片</option>
                    <option value="geojson">WFS</option>
                </select>
                <select name="servertype" lay-verify="required" lay-filter="fwlx">

                    <option value="model">terrain</option>
                </select>
                <select name="servertype" lay-verify="required" lay-filter="fwlx">
                    <option value="arcgis">arcgis</option>
                    <option value="skymap">skymap</option>
                    <option value="geoserver">geoserver</option>
                    <option value="googlemap">googlemap</option>
                    <option value="other">other</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">数据来源</label>
            <div class="layui-input-block">
                <select name="sjly" lay-verify="required" lay-filter="sjly">
                    <option value=""></option>
                    <option value="0">公开</option>
                    <option value="1">私有</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item layui-form" lay-filter="f_xzsj">
            <label class="layui-form-label">选择数据</label>
            <div class="layui-input-block">
                <select name="name" lay-verify="" lay-filter="xzsj" lay-search>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">数据地址</label>
            <div class="layui-input-inline" style="width: 300px;">
                <input name="url" type="text" autocomplete="off" class="layui-input dataUrl">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">样式来源</label>
            <div class="layui-input-block">
                <select name="ysly" lay-verify="required" lay-filter="ysly">
                    <option value=""></option>
                    <option value="0">公开</option>
                    <option value="1">私有</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item layui-form" lay-filter="f_xzys">
            <label class="layui-form-label">选择样式</label>
            <div class="layui-input-block">
                <select name="xzys" lay-verify="" lay-filter="xzys" lay-search>
                </select>
            </div>
        </div>
        <div class="layui-form-item mxlx">
            <label class="layui-form-label">模型类型</label>
            <div class="layui-input-block">
                <select name="mxlx" lay-verify="required" lay-filter="mxlx">
                    <option value=""></option>
                    <option value="0">人工模型</option>
                    <option value="1">倾斜模型</option>
                    <option value="1">点云模型</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item xsjb">
            <label class="layui-form-label">显示级别</label>
            <div class="layui-input-block">
                <div name="level" id="xsjb" class="demo-slider"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">默认状态</label>
            <div class="layui-input-block">
                <select name="status" lay-verify="required" lay-filter="mrzt">
                    <option value=""></option>
                    <option value="1">显示</option>
                    <option value="0">隐藏</option>
                </select>
            </div>
        </div>
        <button class="layui-btn layui-btn-normal do">确认</button>
        <button class="layui-btn layui-btn-normal cancel">取消</button>
    </div>
</body>

</html>
<script src="../../../JS/jquery-2.0.3.js"></script>
<script src="../../../layui/layui.js"></script>
<script>
    $(function () {
        var styleContent = '';//获取的样式配置数据
        layui.use(['element', 'form', 'slider'], function () {
            var element = layui.element,
                form = layui.form,
                slider = layui.slider;

            $('.fwlx').find('.layui-form-select').eq(0).show();
            //当前选择的数据类型
            //当前选择的数据类型对应的值
            var dataTypeVal = 'geojson';
            form.on('select(sjlx)', function (data) {
                switch (data.value) {
                    case '0':
                        dataTypeVal = 'geojson';
                        $('.fwlx').find('.layui-form-select').eq(0).show().siblings('.layui-form-select').hide();                    
                        $('.mxlx').hide();
                        $('.xsjb').hide();
                        break
                    case '1':
                        dataTypeVal = 'model';
                        $('.fwlx').find('.layui-form-select').eq(1).show().siblings('.layui-form-select').hide();
                        $('.mxlx').show();
                        $('.xsjb').hide();
                        break
                    case '2':
                        dataTypeVal = 'geojson';
                        $('.fwlx').find('.layui-form-select').eq(2).show().siblings('.layui-form-select').hide();
                        $('.mxlx').hide();
                        $('.xsjb').hide();
                        break
                    case '3':
                        dataTypeVal = 'terrain';
                        $('.fwlx').find('.layui-form-select').eq(3).show().siblings('.layui-form-select').hide();
                        $('.mxlx').hide();
                        $('.xsjb').hide();
                        break
                    case '4':
                        dataTypeVal = 'tiff';
                        $('.fwlx').find('.layui-form-select').eq(4).show().siblings('.layui-form-select').hide();
                        $('.mxlx').hide();
                        $('.xsjb').show();
                        break

                }
            })

            //服务类型选择
            //当前选择的服务类型
            var servertype = 'vector';
            form.on('select(fwlx)', function (data) {
                servertype = data.value
            })

            //数据来源选择
            form.on('select(sjly)', function (data) {
                if (data.value === '请选择') return;
                parent.parent.parent.ajaxPost(parent.parent.parent.defaultUrl + '/data/selAllDataByUser', {
                    "condition": {
                        "openness": parseInt(data.value),
                        "userid": parent.parent.parent.getLocalStorage('JSXM').id,
                        "groupid": 0,
                        'status': 1
                    },
                    "ispage": false,
                }, function (data) {
                    $('select[name=name]').html('<option>请选择</option>');
                    if (data.code === 200) {
                        for (var i = 0, l = data.data.length;i<l;i++) {
                            var html = '<optgroup label="'+data.data[i].dataType+'">';
                            if (data.data[i].content && data.data[i].content.length > 0) {
                                var contnet = data.data[i].content;
                                for (var k = 0, z = contnet.length;k<z;k++) {
                                    html += '<option value="'+contnet[k].id+'">'+contnet[k].name+'</option>'
                                }
                            }    
                            $('select[name=name]').append(html)    
                        }
                        form.render('select', 'f_xzsj');
                    } else if (data.message) {
                        layer.msg(data.message)
                    }
                })
            });

            //选择数据
            //选择数据的类型
            var datatype = '';
            form.on('select(xzsj)', function (data) {
                //通过id获取该数据的详情
                if (data.value === '请选择') {
                    datatype = ''
                    return
                }
                parent.parent.parent.ajaxGet(parent.parent.parent.defaultUrl + '/data/selDataById', {
                    "id": parseInt(data.value)
                }, function (data) {
                    if (data.code === 200) {
                        $('.dataUrl').val(data.data.dataAddress);
                        //判断当前数据的类型
                         if (datatype !== data.data.dataType) {
                            datatype = data.data.dataType;
                            $('select[name=ysly]').next().find('dd').eq(0).click();
                            $('select[name=xzys]').next().find('dd').eq(0).click();
                        }

                    } else if (data.message) {
                        layer.msg(data.message)
                    }

                })
            });

            //样式来源选择
            form.on('select(ysly)', function (data) {
                if (data.value === '请选择') return;
                parent.parent.parent.ajaxPost(parent.parent.parent.defaultUrl + '/style/selAllStyleByUser', {
                    "condition": {
                        "openness": parseInt(data.value),
                        "userid": parent.parent.parent.getLocalStorage('JSXM').id,
                        "groupid": 0,
                        "dataType": datatype,
                        'status': 1
                    },
                    "ispage": false,
                }, function (data) {
                    $('select[name=xzys]').html('<option>请选择</option>');
                    if (data.code === 200) {
                        for (var i = 0, l = data.data.length; i < l; i++) {
                            $('select[name=xzys]').append(new Option(data.data[i].name, data.data[i].id));
                        }
                        form.render('select', 'f_xzys');
                    }
                })
            });

            //选择样式
            var styletype = '';
            form.on('select(xzys)', function (data) {
                if (data.value === '请选择') return;
                //通过id获取该数据的详情
                parent.parent.parent.ajaxGet(parent.parent.parent.defaultUrl + '/style/selStyleById', {
                    "id": parseInt(data.value)
                }, function (data) {
                    if (data.code === 200) {
                        styleContent = JSON.parse(data.data.content).sIfram;
                        styletype = styleContent.styletype;
                    } else if (data.message) {
                        layer.msg(data.message)
                    }
                })
            });

            //显示级别
            var level = 0;
            slider.render({
                elem: '#xsjb'
                , value: 21 //初始值
                , max: 21
                , range: true //范围选择
                , change: function (vals) {
                    level = vals[0] + ',' + vals[1];
                }
            });

            //点击确定触发事件
            $('.do').click(function () {
                var formVal = form.val('content');
                //对数据进行处理
                formVal.datatype = dataTypeVal;
                formVal.layername = formVal.name = $('select[name=name]').next().find('input').val();
                formVal.checked = Boolean(parseInt(formVal.status));
                formVal.servertype = servertype;
                formVal.styletype = styletype;
                //测试数据
                // formVal.url = '../../../JSON/point.json';
                formVal.url = 'http://192.168.1.40:8090/geoserver/gwc/service/wmts';
                formVal.groupid = parent.rc;
                if ($('.xsjb').css('display') !== 'none') {
                    formVal.level = level;
                }
                formVal.style = styleContent;
                for (key in formVal) {
                    if (key === '') {
                        delete (formVal[key])
                    }
                }
                //调用sdk
                parent.treeStart([formVal],checkNodeId)
                parent.layer.close(parent.indexFunc)

            })
        })
    })

</script>